<template>
    <div class="Main">
        <app-header :active="activeType"></app-header>
        <div class="page_content">
            <x-card class="card">
                <div class="search_operate">
                    <base-select class="select_field" v-model="searchParam.streage" :show-label="false">
                        <base-option value="1" label="全部"></base-option>
                        <base-option value="2" label="名称"></base-option>
                    </base-select>

                    <base-input class="select_value" v-model="searchParam.name"   @clear="filterSelectChange" clearable placeholder="输入检索词" :show-label="false"> </base-input>

                    <base-button type="primary" @click="filterSelectChange"> 检索 </base-button>
                    <base-button v-if="type == 'audio' || type == 'video' || type == 'text'" type="text" @click="showAdvanceSearch"> 高级检索 </base-button>
                </div>
            </x-card>
            <x-tab class="Menu__tab" :data="[{name:'视频',value:'video'},{name:'音频',value:'audio'},{name:'文字',value:'text'}
            ,{name:'文章',value:'post'},{name:'专利',value:'patent'},{name:'报告',value:'report'},{name:'标准',value:'standard'},{name:'电子书',value:'ebook'}]" :actived.sync="type"></x-tab>
            <x-card class="card">
                <div class="search_filter">
                    <div class="filter_text">更多筛选</div>
                    <base-select size="mini" class="filter_select" clearable placeholder="分类" v-model="searchParam.categorySelect" @change="filterSelectChange" :show-label="false">
                        <base-option v-for="(item,index) in categoryList" :key="'filter-category'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <template v-if="type == 'audio' || type == 'video' || type == 'text'">
                        <base-select size="mini" class="filter_select" clearable placeholder="主讲人" v-model="searchParam.speaker"  @change="filterSelectChange" :show-label="false">
                            <base-option v-for="(item,index) in speakerList" :key="'filter-speaker'+index" :value="item.value" :label="item.value"> </base-option>
                        </base-select>
                        <base-select size="mini" class="filter_select" clearable placeholder="主办单位" v-model="searchParam.organizer"  @change="filterSelectChange"  :show-label="false">
                            <base-option v-for="(item,index) in organizerList" :key="'filter-organizer'+index" :value="item.value" :label="item.value"> </base-option>
                        </base-select>
                    </template>
                    <base-select v-else size="mini" class="filter_select" clearable placeholder="作者" v-model="searchParam.author"  @change="filterSelectChange" :show-label="false">
                        <base-option v-for="(item,index) in authorList" :key="'filter-author'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <base-select size="mini" class="filter_select" clearable placeholder="标签" v-model="searchParam.tagSelect"  @change="filterSelectChange"  :show-label="false">
                        <base-option v-for="(item,index) in tagList" :key="'filter-tag'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                </div>
            </x-card>   
            <x-card v-if="loading" class="bounce-loading">
                <bounce-loading></bounce-loading>
            </x-card>
            <x-card v-else  class="card">
                <div class="search_result" v-if="total>0">
                    <div class="search_result_operate">
                        <div>
                            <span class="result_total_text">共找到 </span>
                            <span class="result_num">{{total}} 个 {{ resourceTypeMap[type]}}</span>
                        </div>
                        <base-button type="info" size="small" @click="batchCarts"> 批量加入购物车 </base-button>
                    </div>
                    <base-divider></base-divider>
                    <div class="search_result_list">
                        <template v-for="(item,index) in dataList">
                            <ResourceList :ref="'resourceList'+index+type" :key="index+type+item.id" :currItem="item" :type="type"></ResourceList>
                        </template>
                    </div>
                    <div class="page-warp">
                        <base-pagination
                            @current-change="listResource"
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="searchParam.pageSize"
                            :current-page.sync="searchParam.page"
                        ></base-pagination>
                    </div>
                </div>
                <Empty v-if="total==0"></Empty>
            </x-card>
        </div>
        <advance-search ref="advance-search" @searchData="listResource"></advance-search>
        <app-footer></app-footer>
    </div>    
</template>

<script>
import {XCard,XTab} from "@zkwq/business";
import {ListResource,GetResourceAgg} from '../../service/resource'
import {EditCart,BatchCarts} from '../../service/cart'
import AppHeader from '../components/AppHeader.vue';
import AppFooter from '../components/AppFooter.vue';
import AdvanceSearch from '../components/AdvanceSearch.vue';
import ResourceList from "@/views/resource/ResourceList.vue";
import Empty from '../components/Empty.vue';
export default {
    name: 'Resource',
    components: {
        AppHeader,
        AppFooter,
        ResourceList,
        AdvanceSearch,
        XCard,Empty,XTab
    },
    data() {
        return {
            type:"",
            loading:false,
            searchParam:{
                page:1,
                pageSize:10,
                status:"1",
                type:this.type,
                name:"",
                organizer:"",
                tag:"",
                tagSelect:"",
                categorySelect:"",
                category:"",
                speaker:"",
                author:"",
                streage:"1",
                isBrowser:true,
            }, 
            total:0,
            dataList:[],
            showTypeName:{
                video:"视频",
                audio:"音频",
                text:"文字",
            },
            categoryList:[],
            tagList:[],
            speakerList:[],
            authorList:[],
            organizerList:[],
        }
    },
    computed: {
        activeType() {
            return 'digitalResource-'+this.type;
        }
    },
    watch: {
        '$route.params.type': {
            handler: function (val, oldVal) {
                this.$set(this, 'type', val);
            },
            deep: true
        },
        type:{
            handler: function (val, oldVal) {
                // this.searchParam.speaker = '';
                // this.searchParam.organizer = '';
                // this.searchParam.author = '';
                if (val == 'audio' || val == 'video' || val == 'text') {
                    if (this.searchParam.author) {
                        this.searchParam.speaker = this.searchParam.author;
                        this.searchParam.author = '';
                    }
                    
                } else {
                    if (this.searchParam.organizer) {
                        this.searchParam.organizer = '';
                    }
                    if (this.searchParam.speaker) {
                        this.searchParam.author = this.searchParam.speaker;
                        this.searchParam.speaker = '';
                    }
                }
                this.filterSelectChange();
            },
        }
    },
    mounted() {
        this.type = this.$route.params.type;
        this.listResource();
        this.getResourceAgg();
    },
    methods: {
        filterSelectChange(){
            this.searchParam.page = 1;
            this.listResource();
            this.getResourceAgg();
        },
        getResourceAgg(){
            GetResourceAgg(this.type, this.magazine ? this.magazine.id : '',this.searchParam.name, this.searchParam.speaker, this.searchParam.organizer,this.searchParam.categorySelect, this.searchParam.tagSelect,this.searchParam.author).then(res=>{
                let data = res.data;
                this.categoryList = data?.category || [];
                this.tagList = data?.tag || [];
                this.speakerList = data?.speaker || [];
                this.authorList = data?.author || [];
                this.organizerList = data?.organizer || [];
                console.log(this.categoryList)
            })
        },
        listResource(advancedSearch) {
            this.loading = true;
            this.searchParam.type = this.type;
            if (this.searchParam.categorySelect) {
                this.searchParam.category = [this.searchParam.categorySelect]
            } else {
                this.searchParam.category = [];
            }
            if (this.searchParam.tagSelect) {
                this.searchParam.tag = [this.searchParam.tagSelect]
            } else {
                this.searchParam.tag = [];
            }
            if (advancedSearch && advancedSearch.searchType) {
                this.searchParam.advancedSearch = advancedSearch;
            }
            if (this.magazine) {
                this.searchParam.magazine = this.magazine.id;
            }
            ListResource(this.searchParam).then(res=>{
                let data = res.data;
                if(res.code == 0){
                    this.total = data.total;
                    this.dataList = data.records.map(e => {
                        e.tagList = e.tag?.split(";").filter(f => f)  || [];
                        e.categoryList = e.category?.split(";").filter(f => f) || [];
                        let sysMagazine = e.sysMagazine;
                        if(sysMagazine){
                            if (sysMagazine.magazineType==1) {
                                e.issuingUnitName = sysMagazine.magazineName;
                            }
                            if (sysMagazine.magazineType==2) {
                                e.issuingUnitName = sysMagazine.children?.map(e=>e.name).join(";");
                            }
                        }
                        e.checked = false;
                        e.showMore = false;
                        e.isMore = false;
                        return e;
                    });
                    this.$nextTick(() => {
                        this.dataList.forEach((item, index) => {
                            this.checkOverflow(item, index);
                        });
                    });
                }
            }).finally(()=>{
                this.loading = false;
                if (advancedSearch && advancedSearch.searchType) {
                    this.$refs['advance-search'].hide();
                }
            })
        },
        checkOverflow(item,index) {
            // this.$refs['videoAudioList'+index+this.type]?.checkOverflow();
            // const introEl = this.$refs.introText?.[index];
            // if (!introEl) return false;
            // let isMore = introEl.scrollHeight > 20;
            // this.$set(item, 'isMore', isMore);
        },
        batchCarts() {
            let checkData = this.dataList.filter(e=>e.checked);
            if (checkData && checkData.length>0) {
                let params = checkData.map(e=>{
                    return {
                        "userId": this.user.id,
                        "resourceType":this.type,
                        "resourceId":e.id
                    }
                })
                BatchCarts(params).then(res=>{
                    if(res.code == -1){
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.$router.push("/cart");
                })
            } else {
                this.$message.warning("请选择要加入购物车的内容");
            }
        },
        showAdvanceSearch() {
            this.$refs['advance-search'].show(this.type);
        },
    },
    
}
</script>
<style lang="scss">
.Main{
    .base-input--suffix .base-input__inner {
        padding-left: 12px !important;
    }
    .filter_select{
        margin-right: 20px;
        .base-input__inner{
            color: #3B7AA3;
        }
    }
}
</style>
<style lang="scss" scoped>
.Main{
    height:100%;
    width: 100%;
    overflow: auto;
    .Menu__tab{
      // #F7DE9B
      border-radius: 55px;
      overflow: auto;
      /* 定义滚动条样式，使滑轨透明 */
        /* 滚动条轨道样式 */
        &::-webkit-scrollbar {
          width: 1px;
          height: 2px;
        }
        
        /* 滚动条轨道背景设置为透明 */
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }
        
        /* 滚动条滑块样式 */
        &::-webkit-scrollbar-thumb {
          background-color: #c0c4cc;
          border-radius: 4px;
        }
        
        /* 鼠标悬停时滑块颜色变化 */
        &::-webkit-scrollbar-thumb:hover {
          background-color: #a0a4ac;
        }
      ::v-deep .Menu__item {
        padding: 12px 32px;
        font-weight: bold;
        flex: 0 0 auto;
      }
      ::v-deep .actived{
        background: linear-gradient(253deg,#6340FF 0%,#2973D7 100%);
        border-radius: 55px;
      }
      ::v-deep .Menu__item--active{
        color: white; // 添加白色文字
        // 可选：添加文字阴影增加可读性
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }

    }
    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
    }
    .base-button--primary {
        background-color: #3F7FA7;
        border-color: #3F7FA7;
    }
    .base-tag{
        border-radius: 16px;
        padding: 0px 22px;
    }
    .base-input {
      border: 1px solid #bfc3de;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 12px 0 16px;
      -webkit-transition: border-color .3s;
      transition: border-color .3s;
    }
    .base-input__placeholder{
        left: 12px;
    }
    .base-select{
        border: 1px solid #bfc3de !important;
        background-color: #fff;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .card{
            padding: 18px 0px;
            .search_operate{
                display: flex;
                align-items: center;
                .select_field{
                    width: 120px;
                }
                .select_value{
                    width: 700px;
                }
                .base-button--primary{
                    padding: 0px 33px 0 33px;
                }
                .base-button--text{
                    color: #3B7AA3;
                    background: #ecf5ff;
                    padding: 0 12px 0 12px;
                }
           }
           .search_filter{
                display: flex;
                align-items: center;
                .filter_text{
                    color: #999;
                    margin-right: 20px;
               }
               .filter_select{
                    border: 0px solid #bfc3de !important;
                    width:150px;
                    background: #ecf5ff;
                    .base-input__inner{
                        color: #3B7AA3;
                    }
               }
           }
           .search_result{
                .search_result_operate{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .result_total_text{
                            color: #999;
                        }
                }
                .search_result_list{
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    .search_result_item{
                        display: flex;
                        padding: 20px;
                        border: 1px solid #dcdfe6;
                        border-radius: 4px;
                        flex-direction: column;

                        .search_result_item_base{
                            display: flex;
                            width: 100%;
                            .search_result_item_img{
                                 width: 138px;
                                 height: 150px;
                                 margin-right: 32px;
                                 img{
                                     width: 100%;
                                     height: 100%;
                                 }
                            }
                            .search_result_item_info{    
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                flex: 1;
                                position: relative;

                                .search_result_item_info_title{
                                    font-size: 18px;
                                    color: #3B7AA3 !important;
                                    cursor: pointer;
                                }
                                .search_result_item_info_text{
                                    font-size: 14px;
                                    color: #666;
                                }
                                .search_result_item_info_tag{
                                    display: flex;
                                    align-items: center;
                                    gap: 18px;
                                }
                                .search_result_item_info_price_check{
                                    position: absolute;
                                    right: 15px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    gap: 10px;
                                    .search_result_item_info_price {
                                        color: #F97544;
                                        font-size: 16px;
                                        font-weight: bold;
                                    }
                                }
                            }
                        }
                       .search_result_item_intro{
                            font-size: 14px;
                            color: #666;
                            margin: 12px 0px;
                            position: relative;
                            .intro-text {
                                max-height: 20px; // 3行文字的高度
                                line-height: 20px;
                                overflow: hidden;
                                // white-space: nowrap;
                                // text-overflow: ellipsis;
                                
                                &.show-more {
                                    max-height: 1000px; // 展开后的最大高度
                                }
                            }
                            
                            .show-more-btn {
                                color: #3B7AA3;
                                cursor: pointer;
                                text-align: left;
                                padding: 5px 0;
                                
                                &:hover {
                                    opacity: 0.8;
                                }
                            }
                       }
                      .search_result_item_operate{
                            display: flex;
                            align-items: center;
                            gap: 15px;
                           .base-button{
                                padding: 0 138px;
                                border-radius: 8px;
                           }
                           .base-button--text{
                                border: 1px solid #3B7AA3;
                                color: #3B7AA3;
                                background-color: #fff;
                           }
                       }
                    }
                }
           }
           .page-warp{
                width: 100%;
                text-align: center;
                margin-top: 40px;
           }
        }
    }
}
</style>